<template>
	<view class="tabbar">
		<view class="tab" v-for="item in tabbarList" :key="item.pagePath" @tap='navigatorTo(item.pagePath)'>
			<image v-if="item.pagePath === current" :src="item.selectedIconPath"></image>
			<image v-else :src="item.iconPath"></image>
			<view :class="item.pagePath === current?'texts':'text'">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: String,
				default: "index"
			}
		},
		data() {
			return {
				tabbarList: [{
						text: "首页",
						pagePath: "index",
						iconPath: "/static/home.svg",
						selectedIconPath: "/static/home_Action.svg"
					},
					{
						text: "地图",
						pagePath: "map",
						iconPath: "/static/home/map.svg",
						selectedIconPath: "/static/home/map_Action.svg"
					},
					{
						text: "我的",
						pagePath: "mine",
						iconPath: "/static/mine.svg",
						selectedIconPath: "/static/mine_Action.svg"
					}
				]
			}
		},
		methods:{
			navigatorTo(e){
				console.log(e);
				if(e === "mine"){
					uni.redirectTo({
						url: `../../pages/${e}/${e}`,
						animationDuration:0,
						animationType:"fade-in"
					})
				}else{
					uni.redirectTo({
						url: `../../pages/${e}/${e}`
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.tabbar {
		border-top: 2rpx solid #F5F5F5;
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #FFF;
		z-index: 999;
		justify-content: space-around;
		align-items: center;

		.tab {
			cursor: pointer;
			text-align: center;
			.texts{
				color: #4381E4;
			}
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>
